<template>
    <div>
        <sa-table ref="crudRef" :options="options" :columns="columns" :searchForm="searchForm"
            @resetSearch="resetSearch">
            <template #tableSearch>
                <a-col :span="6">
                    <a-form-item field="type" label="地区排序">
                        <sa-select v-model="searchForm.type" :data="AREA" @change="refresh"></sa-select>
                    </a-form-item>
                </a-col>
                <a-col :span="6">
                    <a-form-item field="sort" label="订单排序">
                        <sa-select v-model="searchForm.sort" :data="SORT" @change="refresh"></sa-select>
                    </a-form-item>
                </a-col>
                <a-col :span="6">
                    <a-form-item field="create_time" label="时间">
                        <a-range-picker v-model="searchForm.create_time" format="YYYY-MM-DD" :allow-clear="true"
                            @change="refresh"></a-range-picker>
                    </a-form-item>

                </a-col>
            </template>
            <template #tableAfterButtons>
            <a-button type="primary" :loading="exportLoading" status="warning" style="padding:0 20px;"
                @click="exportExcel"><icon-share-external />导出</a-button>
        
        </template>
        </sa-table>
    </div>
</template>

<script setup>
import { onMounted, ref, reactive, computed, watch } from 'vue'
import mallApi from '@/api/system/mall'
import SaTable from '@cps/sa-table/index.vue'
import SaSelect from '@cps/sa-select/index.vue'
import { Message } from '@arco-design/web-vue'
import { throttle } from 'lodash';
const crudRef = ref()
const exportLoading = ref(false)
const detailRef = ref()
const AREA = [
    { value: 1, title: '省份排名' },
    { value: 2, title: '城市排名' },
]
const SORT = [
    { value: 1, title: '订单金额降序' },
    { value: 2, title: '订单金额升序' },
    { value: 3, title: '订单量降序' },
    { value: 4, title: '订单量升序' },
]
const searchForm = ref({
    type: 1,
    sort: 1,
    create_time: [],
})
const options = reactive({
    api: mallApi.mall_orderTotal_cancel,//表格数据接口
    operationColumnWidth: 120,//操作欄
    showSearch: true,
    columnAlign: 'center',
    pageSimple: false,//是否展示操作欄有 以及工具欄
    isTreeTable: false,
    isExpand: false,//展開所有子樹
    operationColumn: false,
})
const columns = reactive([
    { title: '名称', dataIndex: 'city_name', width: 100 },
    { title: '订单总额', dataIndex: 'order_price_total', width: 150 },
    { title: '订单数量', dataIndex: 'order_num_total', width: 150 },
    { title: '条数', dataIndex: 'goods_num', width: 120 },
    { title: '统计时间', dataIndex: 'total_time', width: 120 },
])

const refresh = async () => {
    crudRef.value?.refresh()
}
const resetSearch = () => {
    searchForm.value.create_time = []
}
const paramsData = ref({})
const getParams = async () => {
    const { data } = await mallApi.mall_orderTotal_cancel_config()
    paramsData.value = { ...data }
    console.log('11', paramsData.value);
}
const exportExcel = throttle(async () => {
  exportLoading.value = true
  const queryParams = new URLSearchParams(searchForm.value).toString();
  const downloadUrl = `${import.meta.env.VITE_APP_BASE_URL}/shop/admin/total/export?${queryParams}`
  window.location.href = downloadUrl
  setTimeout(() => {
    exportLoading.value = false
  }, 1500);
}, 3000)
onMounted(async () => {
    refresh()
    getParams()
})
</script>

<style scoped>
.icon {
    width: 1em;
}
</style>